import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import menuList, { MenuListProps } from '@/assets/menuList'

const Layout = () => import(/* webpackChunkName: "Layout" */ '../layout/layout.vue')
const Button = () => import(/* webpackChunkName: "Button" */ '../views/button/button.vue')
const Link = () => import(/* webpackChunkName: "Link" */ '../views/link/link.vue')
const Radio = () => import(/* webpackChunkName: "Radio" */ '../views/radio/radio.vue')
const Checkbox = () => import(/* webpackChunkName: "Checkbox" */ '../views/checkbox/checkbox.vue')
const Input = () => import(/* webpackChunkName: "Input" */ '../views/input/input.vue')
const InputNumber = () => import(/* webpackChunkName: "InputNumber" */ '../views/inputNumber/inputNumber.vue')
const Select = () => import(/* webpackChunkName: "Select" */ '../views/select/select.vue')
const Switch = () => import(/* webpackChunkName: "Switch" */ '../views/switch/switch.vue')
const Slider = () => import(/* webpackChunkName: "Slider" */ '../views/slider/slider.vue')
const Form = () => import(/* webpackChunkName: "Form" */ '../views/form/form.vue')
const Tag = () => import(/* webpackChunkName: "Tag" */ '../views/tag/tag.vue')
const Progress = () => import(/* webpackChunkName: "Progress" */ '../views/progress/progress.vue')
const Tree = () => import(/* webpackChunkName: "Tree" */ '../views/tree/tree.vue')
const Pagination = () => import(/* webpackChunkName: "Pagination" */ '../views/pagination/pagination.vue')
const Badge = () => import(/* webpackChunkName: "Badge" */ '../views/badge/badge.vue')
const Avatar = () => import(/* webpackChunkName: "Avatar" */ '../views/avatar/avatar.vue')
const Loading = () => import(/* webpackChunkName: "Loading" */ '../views/loading/loading.vue')
const Tooltip = () => import(/* webpackChunkName: "Tooltip" */ '../views/tooltip/tooltip.vue')
const Card = () => import(/* webpackChunkName: "Card" */ '../views/card/card.vue')
const Dropdown = () => import(/* webpackChunkName: "Dropdown" */ '../views/dropdown/dropdown.vue')
const Message = () => import(/* webpackChunkName: "Message" */ '../views/message/message.vue')
const Notify = () => import(/* webpackChunkName: "Notify" */ '../views/notify/notify.vue')
const Confirm = () => import(/* webpackChunkName: "Confirm" */ '../views/confirm/confirm.vue')
const Carousel = () => import(/* webpackChunkName: "Carousel" */ '../views/carousel/carousel.vue')
const Dialog = () => import(/* webpackChunkName: "Dialog" */ '../views/dialog/dialog.vue')
const TimePicker = () => import(/* webpackChunkName: "TimePicker" */ '../views/timePicker/timePicker.vue')
const Drawer = () => import(/* webpackChunkName: "Drawer" */ '../views/drawer/drawer.vue')
const InfiniteScroll = () => import(/* webpackChunkName: "InfiniteScroll" */ '../views/infiniteScroll/infiniteScroll.vue')
const BackTop = () => import(/* webpackChunkName: "BackTop" */ '../views/backTop/backTop.vue')
const Rate = () => import(/* webpackChunkName: "Rate" */ '../views/rate/rate.vue')
const Timeline = () => import(/* webpackChunkName: "Timeline" */ '../views/timeline/timeline.vue')
const Particle = () => import(/* webpackChunkName: "Particle" */ '../views/particle/particle.vue')
const RowCol = () => import(/* webpackChunkName: "RowCol" */ '../views/rowCol/rowCol.vue')
const Divider = () => import(/* webpackChunkName: "Divider" */ '../views/divider/divider.vue')
const CountScroll = () => import(/* webpackChunkName: "CountScroll" */ '../views/countScroll/countScroll.vue')
const Menu = () => import(/* webpackChunkName: "Menu" */ '../views/menu/menu.vue')
const Color = () => import(/* webpackChunkName: "Color" */ '../views/color/color.vue')
const Collapse = () => import(/* webpackChunkName: "Collapse" */ '../views/collapse/collapse.vue')
const Image = () => import(/* webpackChunkName: "Image" */ '../views/image/image.vue')
const Tabs = () => import(/* webpackChunkName: "Tabs" */ '../views/tabs/tabs.vue')
const Affix = () => import(/* webpackChunkName: "Affix" */ '../views/affix/affix.vue')
const Popover = () => import(/* webpackChunkName: "Popover" */ '../views/popover/popover.vue')
const DatePicker = () => import(/* webpackChunkName: "DatePicker" */ '../views/datePicker/datePicker.vue')
const Paragraph = () => import(/* webpackChunkName: "Paragraph" */ '../views/paragraph/paragraph.vue')
const Anchor = () => import(/* webpackChunkName: "Anchor" */ '../views/anchor/anchor.vue')
const ScrollBar = () => import(/* webpackChunkName: "ScrollBar" */ '../views/scrollBar/scrollBar.vue')

const allRouter: RouteRecordRaw[] = [
  { path: '/layout', redirect: '/layout/button' },
  { path: '/layout/button', name: 'button', component: Button },
  { path: '/layout/link', name: 'link', component: Link },
  { path: '/layout/radio', name: 'radio', component: Radio },
  { path: '/layout/checkbox', name: 'checkbox', component: Checkbox },
  { path: '/layout/input', name: 'input', component: Input },
  { path: '/layout/inputNumber', name: 'inputNumber', component: InputNumber },
  { path: '/layout/select', name: 'select', component: Select },
  { path: '/layout/switch', name: 'switch', component: Switch },
  { path: '/layout/slider', name: 'slider', component: Slider },
  { path: '/layout/form', name: 'form', component: Form },
  { path: '/layout/tag', name: 'tag', component: Tag },
  { path: '/layout/progress', name: 'progress', component: Progress },
  { path: '/layout/tree', name: 'tree', component: Tree },
  { path: '/layout/pagination', name: 'pagination', component: Pagination },
  { path: '/layout/badge', name: 'badge', component: Badge },
  { path: '/layout/avatar', name: 'avatar', component: Avatar },
  { path: '/layout/loading', name: 'loading', component: Loading },
  { path: '/layout/tooltip', name: 'tooltip', component: Tooltip },
  { path: '/layout/card', name: 'card', component: Card },
  { path: '/layout/dropdown', name: 'dropdown', component: Dropdown },
  { path: '/layout/message', name: 'message', component: Message },
  { path: '/layout/notify', name: 'notify', component: Notify },
  { path: '/layout/confirm', name: 'confirm', component: Confirm },
  { path: '/layout/carousel', name: 'carousel', component: Carousel },
  { path: '/layout/dialog', name: 'dialog', component: Dialog },
  { path: '/layout/timePicker', name: 'timePicker', component: TimePicker },
  { path: '/layout/drawer', name: 'drawer', component: Drawer },
  { path: '/layout/infiniteScroll', name: 'infiniteScroll', component: InfiniteScroll },
  { path: '/layout/backTop', name: 'backTop', component: BackTop },
  { path: '/layout/rate', name: 'rate', component: Rate },
  { path: '/layout/timeline', name: 'timeline', component: Timeline },
  { path: '/layout/particle', name: 'particle', component: Particle },
  { path: '/layout/rowCol', name: 'rowCol', component: RowCol },
  { path: '/layout/divider', name: 'divider', component: Divider },
  { path: '/layout/countScroll', name: 'countScroll', component: CountScroll },
  { path: '/layout/menu', name: 'menu', component: Menu },
  { path: '/layout/color', name: 'color', component: Color },
  { path: '/layout/collapse', name: 'collapse', component: Collapse },
  { path: '/layout/image', name: 'image', component: Image },
  { path: '/layout/tabs', name: 'tabs', component: Tabs },
  { path: '/layout/affix', name: 'affix', component: Affix },
  { path: '/layout/popover', name: 'popover', component: Popover },
  { path: '/layout/datePicker', name: 'datePicker', component: DatePicker },
  { path: '/layout/paragraph', name: 'paragraph', component: Paragraph },
  { path: '/layout/anchor', name: 'anchor', component: Anchor },
  { path: '/layout/scrollBar', name: 'scrollBar', component: ScrollBar }
]

const filterRouter = (): RouteRecordRaw[] => {
  return allRouter.filter((item: RouteRecordRaw) => {
    return menuList.some((child: MenuListProps) => item.path === child.router)
  })
}

const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: '/layout/button' },
  { path: '/:pathMatch(.*)', redirect: '/layout/button' },
  {
    path: '/layout',
    name: 'layout',
    meta: { isLogin: false },
    component: Layout,
    children: filterRouter()
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const menuTitle = menuList.find((item: MenuListProps) => to.path === item.router)?.name
  document.title = `FiveXu-UI-Plus ${menuTitle}-${String(to.name)}` || 'FiveXu-UI-Plus'
  next()
})

export default router
